<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <button>按钮</button>
    </div>
    <script>

        /*
            阻止冒泡
                // ***阻止冒泡（ 元素和 父级元素 都需要添加点击事件，但是 他们做的事情不一样--最好阻止子元素事件的冒泡）
                // 阻止按钮把点击事件 传递给 他的父元素
                evt.stopPropagation();

            什么是冒泡
                事件冒泡--事件传播的过程--从内到外传递的过程---从特定元素 到 不特定元素

                大部分的事件-默认都冒泡


        
        */

        var btn = document.querySelector("button");
        var div = document.querySelector("div");
        btn.onclick = function (evt) {
            console.log('点击了按钮--按钮会把点击事件 传递 给 他的父元素 div');
            console.log(evt);
            console.log(evt.target);//事件产生那一刻的事件源
            console.log(evt.currentTarget);//事件产生那一刻的事件源

            // ***阻止冒泡（ 元素和 父级元素 都需要添加点击事件，但是 他们做的事情不一样--最好阻止子元素事件的冒泡）
            // 阻止按钮把点击事件 传递给 他的父元素
            evt.stopPropagation();
            // evt.cancelBubble = true   ie上这样写（了解）



        }

        div.onclick = function (evt) {
            console.log('点击了div--会把点击事件 传递 给 他的父元素 body');
            console.log(evt);
            console.log(evt.target);
        }
        // document.body.onclick = function (evt) {
        //     console.log('点击了body--会把点击事件 传递 给 他的父元素 html');
        //     console.log(evt);
        //     console.log(evt.target);
        // }
        // document.documentElement.onclick = function (evt) {
        //     console.log('点击了html');
        //     console.log(evt);
        //     console.log(evt.target);
        // }
        document.onclick = function (evt) {
            console.log('点击了doc');
            console.log(evt);
            console.log(evt.target);
            // --- currentTarget 和this  执行的 添加事件的元素 （不管事件源）
            // ---target -- 事件源---（直接触发事件的元素）
            console.log(evt.currentTarget);//this
            console.log(this);
        }




        //over out 默认都是冒泡的
        // btn.onmouseover = function () {
        //     console.log('btn over');
        // }
        // document.onmouseover = function () {
        //     console.log('doc over');
        // }

        //enter leave 默认都不是冒泡的
        btn.onmouseenter = function () {
            console.log('btn onmouseenter');
        }
        document.onmouseenter = function () {
            console.log('doc onmouseenter');
        }

    </script>

</body>

</html>